<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>02姓名案例_methods语法</title>
		<script src="../../js/vue.js"></script>
		<style>

		</style>
	</head>
	<body>
		<div id="root">
			<h1>{{name}}</h1>
			姓名:<input type="text" v-model="firstName"><br />
			名:<input type="text" v-model="lastName"><br />
			全名:<span>{{fullName()}}</span>
		</div>
		<script>
			const vm = new Vue({
				el: '#root',
				data: function() {
					return {
						name: '读书点点',
						firstName: '李',
						lastName: '四'
					}
				},
				methods: {
					fullName() {
						return this.firstName + '~' + this.lastName;
					}
				}
			});
		</script>
	</body>
</html>